<template>
	<view>
		<view class="mainbody">
			<scroll-view class="left">
				<view @click="leftclick(index)" :class="currentindex == index?'action':''" v-for="(item,index) in grade"
					:key="index">{{item.gradename}}</view>
			</scroll-view>
			<scroll-view class="right">
				<view class="rightv" @click="rightclick(item.id)" :class="{'raction': rselect.indexOf(item.id)!=-1}"
					v-for="(item,index) in grade[currentindex].classIdNames" :key="item.id">{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="tab">
			<text>已選擇班級（{{rselect.length}}）個</text>
			<button @tap="tappop">確認加入</button>
<!-- 			<view class="popup" v-show="show">
				<view class="popup-info">
					<view v-if="this.rselect.length==0">您未選擇任何班級。</view>
					<view class="close" @tap="close">×</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rselect: [],
				grade: [
									{
										gradename: '一年級',
										classIdNames: [
											{
												id: 12,
												name: '1班'
											},
											{
												id: 13,
												name: '2班'
											},
											{
												id: 14,
												name: '3班'
											},
											{
												id: 15,
												name: '4班'
											},
										]
									},
				{
										gradename: '二年級',
										classIdNames: [
											{
												id: 22,
												name: '1班'
											},
											{
												id: 23,
												name: '2班'
											},
											{
												id: 24,
												name: '3班'
											},
											{
												id: 25,
												name: '4班'
											},
										]
									},
					
								],
				// grade:['一年级','二年级','三年级'],
				currentindex: 0,
				show: false,
			}
		},
		onShow() {
			this.getClass()
		},
		methods: {
			getClass(){
				this.$myRequest({
					url:"/teacher/getClassList/"+uni.getStorageSync('id'),
					method: 'GET',
				}).then(res => {
					this.grade = res.data.data
				})
			},
			leftclick(index) {
				// console.log(index);
				this.currentindex = index;
				// this.rselect = [];
			},

			rightclick(index) {
				if (this.rselect.indexOf(index) == -1) {
					// console.log(index)
					this.rselect.push(index);
					// console.log('len',this.rselect.length)

				} else {
					this.rselect.splice(this.rselect.indexOf(index), 1);
				}
			},

			// 弹窗
			tappop() {
				if(this.rselect.length==0){
					uni.showToast({
						title:'您未選擇任何班級',
						icon:'none',
					})
				}else{
					uni.request({
						url: this.$api+'/teacher/addClassByTeacherId/'+uni.getStorageSync('id'),
						method: 'POST',
						header: {  
							'Content-Type': 'application/x-www-form-urlencoded',
							Authorization: uni.getStorageSync("token")
						},
						data:{
							ids:this.rselect,
						},
						success:(res)=>{
							this.getClass()
							uni.showToast({
								title:'成功加入班级',
								content:'成功加入班级'
							})
						}
					})
				}
				
			},
			close() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 主体 */
	.mainbody {
		height: 91vh;
		display: flex;
		border-top: #e0e0df 1px solid;
	}

	/* 左侧边栏 */
	.left {
		width: 30%;
		padding-top: 50upx;
		background-color: #FFFFFF;
		view {
			height: 100upx;
			text-align: center;
			line-height: 100upx;
			font-weight: bold;
			font-size: 32upx;
		}
	}

	.action {
		background-color: #f8f8f7;
	}

	/* 右边班级栏 */
	.right {
		display: flex;
		flex-direction: row;
		width: 70vw;
		box-shadow: 20upx 0px 20upx #f0f1f1 inset;
		background-color: #f8f8f7;
	}

	.rightv {
		display: inline-block;
		background-color: #f0f1f1;
		width: 140upx;
		height: 70upx;
		text-align: center;
		line-height: 70upx;
		border-radius: 8upx;
		margin: 25upx 0upx 0upx 25upx;
		font-size: 24upx;
		color: #787979;
		font-weight: bold;
	}

	.raction {
		background-color: #5c8ff6;
		color: white;
	}

	/* 下部导航栏 */
	.tab {
		display: flex;
		position: fixed;
		bottom: 0;
		height: 10vh;
		width: 100vw;
		align-items: center;
		justify-content: center;
		border-top: #e0e0df 1px solid;
		background-color: #ffffff;
		text {
			font-weight: bold;
			width: 50vw;
			text-align: center;
			font-size: 32upx;
		}
		button {
			width: 40vw;
			height: 80upx;
			background-color: #5c8ff6;
			color: white;
			line-height: 80upx;
			font-size: 32upx;
		}
	}

	/* 弹窗 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 9998;
	}

	.popup-info {
		position: fixed;
		width: 420upx;
		height: 160upx;
		top: 40%;
		left: 18%;
		font-size: 34upx;
		padding: 40upx;
		border-radius: 20upx;
		background-color: #ffffff;
		color: #6e6e6e;
		text-align: center;
		line-height: 160upx;
		z-index: 9999;
	}

	.close {
		position: absolute;
		right: 15upx;
		top: -45upx;
		font-size: 65upx;
		color: #cccccc;
		font-weight: 100;
		z-index: 9999;
	}
</style>
